<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <style>
        *{
            margin:0;
            padding:0;
            -ms-box-sizing:border-box;
            box-sizing: border-box;
            border:0;
        }
        .clearfix:after{
            display: table;
            content:"";
            clear:both;
        }
        .fl{
            float:left;
        }
        .fr{
            float:right;
        }
        li{
            list-style: none;
        }
        .img{
            vertical-align: middle;
        }
        html,body{
            width:100%;
        }
        .top{
            height:2.37rem;
            min-height:2.37rem;
            background: #eaeaea;
            font-size:16px;
            text-align: center;
        }

        .banner img{
            width:100%;
        }


        .bottom{
            position:fixed;
            bottom:0px;
            left:0px;
            right:0px;
            width:100%;
            height:1rem;
            background: #e2e2e2;
        }
        form{
            padding:5px;
        }
        .fixedtop{
            margin:0 auto;
            line-height: 36px;
            border-radius:20px;
            outline:none;
            border: 1px solid rgba(142, 142, 142, 0.5);
            padding-left:20px;
            padding-bottom:20px;
            width:220px;
            height:28px;
            background: url("") no-repeat 10px center;
            background-size:25px;
        }
        .fixedtop input{
            outline:none;
            border:none;
            background:none;
            height:36px;
            line-height:36px;
            text-indent:80px;
            font-size:14px;
            float:left;
            padding-bottom:6px;
        }
        .cnt{
            margin:0 auto;
        }
        .cnt img{
            width:15%;
            height:15%;
            float:left;
            margin-left:13px;
            margin-bottom:10px;
            vertical-align: center;
        }

    </style>
</head>
<body>

        <!--头部-->
        <div class="top">
            <form>
                <div class="fixedtop">
                    <input placeholder="搜索" id="sousuo" name="搜索"/>
                </div>
            </form>
        </div>

        <div class="banner">
            <img src="images/index_banner.jpg" />
        </div>
        <!--内容-->
        <div class="cnt">
            <ul class="clearfix">
                <li><img src="images/jiadian.png" /></li>
                <li><img src="images/muying.png" /></li>
                <li><img src="images/nvzhuagn.png" /></li>
                <li><img src="images/xiangji.png" /></li>
                <li><img src="images/caizhuang.png" /></li>
                <li><img src="images/muying.png" /></li>
                <li><img src="images/nvzhuagn.png" /></li>
                <li><img src="images/xiangji.png" /></li>
                <li><img src="images/jiadian.png" /></li>
                <li><img src="images/muying.png" /></li>
            </ul>
        </div>
        <!--尾部-->
        <div class="bottom"></div>

</body>
</html>